import React, { Component } from 'react';
import '../../css/Message.scss';

class Message extends Component {

      constructor(props) {
            super(props);
            this.state = {
                  opacity: 1,
            }
      }

      componentDidMount() {
            let opacity = 1;
            let message = document.querySelector('.tips-container');
            setTimeout(() => {
                  let timer = setInterval(() => {
                        opacity = opacity - 0.05;
                        this.setState({
                              opacity: opacity,
                        });
                        if (opacity < 0) {
                              clearInterval(timer);
                              message.style.display = "none";
                        }
                  }, 30);
            }, 5000);
      }

      render() {
            return (
                  <div style={{ opacity: this.state.opacity }} className="tips-container">
                        <div className="flex-container">
                              <div className="tips-content">
                                    {this.props.text}
                              </div>
                        </div>
                  </div>
            )
      }

}

export default Message;
